<template>
	<view class="page">
		<view class="page-bg">
			<view :style="{height:statusBarHeight+'px'}"></view>
			<view class="register-box">
				<text>账号注册</text>
			</view>
			<view class="logo-box">
				<image src="../../static/logo.png" mode=""></image>
				<text>- GVIM -</text>
			</view>
		</view>
		<view class="login-box">
			<text class="login-box-title-password">密码登录</text>
			<view class="login-box-form">
				<view class="login-box-form-phone">
					<u--input
						color="#42b883"
						prefixIcon="account-fill"
						type="number"
						placeholder="请输入手机号"
						border="surround"
						:customStyle="{height:'65rpx',borderRadius:'30px'}"
						:prefixIconStyle="{color:'#42b883',fontSize:'25px',margin:'0 10rpx 0 10rpx'}"
						:maxlength="11"
						v-model="loginForm.username"
					></u--input>
				</view>
				<view v-if="loginType === 1" class="login-box-form-password">
					<u--input
						color="#42b883"
						prefixIcon="lock-fill"
						type="password"
						placeholder="请输入密码"
						border="surround"
						:customStyle="{height:'65rpx',borderRadius:'30px'}"
						:prefixIconStyle="{color:'#42b883',fontSize:'25px',margin:'0 10rpx 0 10rpx'}"
						v-model="loginForm.password"
					></u--input>
				</view>
				<view v-else class="login-box-form-code">
					<u-input
						color="#42b883"
						prefixIcon="lock-fill"
						type="number"
						placeholder="请输入验证码"
						border="surround"
						:customStyle="{height:'65rpx',borderRadius:'30px'}"
						:prefixIconStyle="{color:'#42b883',fontSize:'25px',margin:'0 10rpx 0 10rpx'}"
						v-model="loginForm.code"
					>
						<template #suffix>
							<text>获取验证码</text>
						</template>
					</u-input>
				</view>
				<view class="login-box-form-submit">
					<u-button
						:customStyle="{height:'100rpx',borderRadius:'50px'}"
						:hairline="false"
						type="primary"
						text="登 录"
						@click="handleLogin"
					></u-button>
					<u-row>
						<u-col class="other" span="6" v-if="loginType == 1" @click="handleSwitchType(2)">
							<text class="other-code">验证码登录</text>
						</u-col>
						<u-col class="other" span="6" v-else @click="handleSwitchType(2)">
							<text class="other-code">密码登录</text>
						</u-col>
						<u-col class="other" span="6">
							<text class="other-password">忘记密码</text>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
	</view>
	<u-loading-page
		:loading="loginLoading"
		loadingText="正在登录中..." 
		loadingMode="spinner"
		loading-color="#42b883"
		bg-color="rgba(0, 0, 0, 0.0)"
		color="#42b883"
		fontSize="16"
	>	
	</u-loading-page>
</template>

<script setup>
import {ref} from "vue"
import {useUserStore} from "../../stores/user.js"
import {setToken} from "../../utils/auth.js"
const userStore = useUserStore()
let loginForm = ref({
	username: "12345678901",
	password: "admin",
	code: ""
})
let statusBarHeight = ref(0)
let loginLoading = ref(false)
let loginType = ref(1)
function handleSwitchType(type) {
	console.log(type)
	if(type == 1) {
		loginType.value = 2
	}
	if(type == 2){
		loginType.value = 1
	}
	console.log(loginType.value)
}
function handleLogin(){
	loginLoading.value = true
	userStore.Login(loginForm.value).then(
		(res) => {
			loginLoading.value = false
			if(res.loginStatus == true) {
				uni.switchTab({
					url: "/pages/chat/index"
				})
			}else{
				uni.showToast({
					title:"密码错误",
					icon:"error"
				})
			}
			
		},
		(err) => {
			console.log(err)
			loginLoading.value = false
		}
	)
}
uni.getStorage({
	key:"statusBarHeight",
	success: (res) => {
		statusBarHeight.value = Number(res.data)
	}
})
</script>

<style lang="scss" scoped>
	.page-bg {
		background-image: linear-gradient(to bottom, #4cf7b1 1%,#ffffff 99%);
	}
	.register-box{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		margin-right: 40rpx;
		color: #2f8b68;
	}
	.logo-box{
		margin-top: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
		}
		text {
			margin-top: 20rpx;
			font-size: 45rpx;
			font-weight: bold;
			color: #b3b0b5;
		}
	}
	.login-box{
		margin-top: 100rpx;
		.login-box-title-password{
			margin: 40rpx 0 0 80rpx;
		}
		.login-box-form{
			padding: 40rpx 50rpx 40rpx 50rpx;
			.login-box-form-phone{
				margin-bottom: 20rpx;
			}
			.login-box-form-code{
				
			}
			.login-box-form-submit{
				margin-top: 60rpx;
				.other {
					margin-top: 20rpx;
					color: gray;
				}
				.other-code{
					text-align: center;
				}
				.other-password{
					text-align: center;
				}
			}
		}
	}
</style>